<template>
    <div class="popup">
        <!-- 搜索框 -->
        <form action="/">
            <van-search
                v-model="value"
                show-action
                :placeholder="defaultKeyword"
                @search="onSearch"
                @cancel="onCancel"
                @input="onInput"
            />
        </form>
        <!-- 此处会出现 1.历史热门 2.搜索列表  3.商品列表 -->
        <!-- 历史记录和热门搜索 -->  
        <HistortHot v-if="num==1" :hotKeywordList="hotKeywordList" :historyKeywordList="historyKeywordList"></HistortHot>
        <!-- 子组件 -->
        <!-- 搜索列表 -->
        <SearchLists v-if="num==2" :SearchHelper="SearchHelper"></SearchLists>
        <!-- 搜索后的商品列表 -->
        <SearchGoodsList v-if="num==3"></SearchGoodsList>
       
    </div>
</template>

<script>
// 引入对应的 历史热门 搜索列表 搜索商品列表子组件
import HistortHot from "@/components/search/HistoryHot.vue";
import SearchGoodsList from "@/components/search/SearchGoodsList.vue";
import SearchLists from "@/components/search/SearchLists.vue";
import {GetHistoryHot,GetSearchHelper} from "@/request/api.js";
export default {
    data () {
        return {
            value:"",
            num:1,
            hotKeywordList:[],
            historyKeywordList:[],
            defaultKeyword:"",
            SearchHelper:[]
        }
    },
    methods:{
        // 当点击回车后,会执行这个函数
        onSearch(){
            // Toast("搜索被点击了");
            this.num = 3;
        },
        // 当点击取消的时候,会执行这个函数
        onCancel(){
            // Toast("取消被点击了");
            // 返回上一步的方法
            this.$router.go(-1);
        },
        // 当在表单中输入数据的时候会触发
        onInput(){
            // console.log("你在输入数据");
            this.num = 2;
            // 做搜索的数据请求
            GetSearchHelper({keyword:this.value})
            .then(res=>{
                // console.log(res);
                this.SearchHelper = res.data;
            })

        }
    },
    components:{
        HistortHot,
        SearchGoodsList,
        SearchLists
    },
    created(){
        // 搜索数据请求
        GetHistoryHot()
        .then(res=>{
            console.log(res);
            this.historyKeywordList = res.data.historyKeywordList
            this.hotKeywordList = res.data.hotKeywordList
            this.defaultKeyword = res.data.defaultKeyword.keyword;

        })
    }
}
</script>
 
<style lang = "less" scoped>
    .popup{
        width: 100%;
        height: 100%;
        background:#efefef;
        position: absolute;
        top:0;
    }
</style>